<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const vm = {
        _data: {
          name: "laowang",
          age: 18,
          count: 0,
        },
      };

      /* 
      数据代理:
        - 我们配置的数据放在了vm的_data身上
        - 因为this也好,插值也好,都是直接找的vm对象,所以每次拿数据都要通过vm._data来拿
        - 所以我们希望把_data上的属性,在vm中放一份,我们读取和修改都是直接操作的是vm身上的数据
        - vm身上的数据被获取或者被修改的时候,会通知_data去读或者该值
        
      
      */

      //数据代理的实现
      for (let key of Object.keys(vm._data)) {
        Object.defineProperty(vm, key, {
          get: function proxyGetter() {
            return vm._data[key];
          },
          set: function proxySetter(newVal) {
            vm._data[key] = newVal;
          },
        });
      }
    </script>
  </body>
</html>
